<template>
  <div class="main">
    <div>
      <fcTable
        ref="table"
        :columes="columes"
        :selection="false"
        :url="this.list"
        :deletUrl="universalUrl"
      >
        <!-- 表上头按钮插槽 -->
        <template v-slot:button>
          <el-button
            icon="el-icon-circle-plus-outline"
            type="primary"
            v-hasPermi="['system']"
            @click="add()"
            >新增</el-button
          >
        </template>

        <!-- 表格行插槽 -->
        <template #status="scope">
          <el-tag :type="scope.row.status === 0 ? 'primary' : 'warning'">{{
            scope.row.statusText
          }}</el-tag>
        </template>
        <template #operation="scope">
          <el-link type="primary" style="margin-right: 5px"  @click="edit(scope.row)">编辑</el-link>
        </template>
      </fcTable>
    </div>
    <billCustomerAdd
      :title="title"
      :visible.sync="visible"
      :item="element"
      @Ok="addAndEdit"
    ></billCustomerAdd>
  </div>
</template>
<script>
import request from "@/utils/request";
import fcTable from "@/components/futureCloudMOM/fcTable";
import billCustomerAdd from "./billCustomerAdd";
import { createLogger } from "vuex";
export default {
  name: "BasicCustomer",
  components: {
    fcTable,
    billCustomerAdd,
  },
  data() {
    return {
      columes: [
        {
          label: "客户编码",
          key: "code",
          visible: true,
        },
        {
          label: "客户名称",
          key: "name",
          visible: true,
        },
        {
          label: "客户地址",
          key: "address",
          visible: true,
        },
        {
          label: "状态",
          key: "status",
          visible: true,
          type: "slot",
          dictCode: "sys_normal_disable",
        },
        {
          label: "客户联系人",
          key: "contact",
          visible: true,
        },
        {
          label: "联系电话",
          key: "phone",
          visible: true,
        },
        {
          label: "税号",
          key: "tax",
          visible: true,
        },
        {
          label: "发票抬头",
          key: "title",
          visible: true,
        },
        {
          label: "邮箱",
          key: "email",
          visible: true,
        },
        {
          label: "备注",
          key: "remark",
          visible: true,
          search: true,
        },
        {
          label: "操作",
          key: "operation",
          //是否支持删除功能
          delete: true,
          //插槽需要的属性
          type: "slot",
          fixed: "right",
          //显隐列需要的属性
          visible: true,
          disabled: true,
          //不支持搜索 写入
          search: true,
        },
      ],
      //新增/编辑弹窗打开的标题
      title: "",
      //显隐
      visible: false,
      //数据
      element: {},
      //列表页
      list: "basic/customer/getList",
      //新增 修改 删除
      universalUrl: "basic/customer",
    };
  },

  methods: {
    add() {
      this.element = null;
      this.title = "新增";
      this.visible = true;
    },
    edit(item) {
      console.log(item);
      this.element = item;
      this.title = "编辑";
      this.visible = true;
    },
    addAndEdit(item) {
      console.log(item);
      let method = "put";
      if (this.title == "新增") {
        method = "post";
      }
      request({
        url: this.universalUrl,
        method: method,
        data: item,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.$refs.table.getList();
          this.visible = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //开关修改状态
    editByStatus(item) {
      request({
        url: this.universalUrl,
        method: "put",
        data: item,
      }).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.$refs.table.getList();
        } else {
          this.$message.error(res.message);
          this.$refs.table.getList();
        }
      });
    },
  },
};
</script>
<style scoped>
.main {
}
</style>
